<template>
	<view class="item" v-for="item,index in goodsList" :key="index">
		<image :src="item.goods_big_logo" mode=""></image>
		<view class="msg">
			<view class="name">{{item.name}}</view>
			<!-- <view class="intr" v-html="item.introduce"></view> -->
			<view class="price">￥{{item.price}}</view>
		</view>
	</view>
</template>

<script setup>
 const prop=defineProps(['goodsList'])
</script>

<style>
/* // 商品列表项样式 */
 .item {
		display: flex;
		justify-content: space-around;
		width: 95%;
		height: 180rpx;
		border-radius: 10rpx;
		border: 1px solid #ccc;
		box-shadow: 2px 2px 2px #ccc;
		margin: 10rpx auto;
		align-items: center;
		
	}

	/* // 商品列表项中图片样式 */
 .item image {
		width: 150rpx;
		height: 150rpx;
		border: 1px solid #ddd;	
		margin: 0 10rpx;

	}

	/* // 商品列表项中名称和价格区域样式 */
	.item .msg {
		flex: 1;
		height: 180rpx;
		/* border: 1px solid red; */
		/* // font-size: 25rpx; */
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
   /* // 商品名称样式 */
	.item .msg .name {
		font-size: 25rpx;
		color: #666;
		 overflow: hidden;
		-webkit-line-clamp: 3;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
   /* // 商品价格样式 */
	.item .msg .price {
		font-size: 30rpx;
		color: red;
	}
</style>